import React from 'react';
import {Button, Row, Col, Tooltip} from 'antd';
import {
    WeaTop,
    WeaTab,
    WeaRightMenu,
    WeaLocaleProvider,
    WeaSearchGroup,
    WeaFormItem,
    WeaSelect,
    WeaBrowser
} from 'ecCom';
import ScoreReportList from "./ScoreReportList";
import ScoreWorkerReport from "./ScoreWorkerReport";
import {observer, inject} from 'mobx-react';

const getLabel = WeaLocaleProvider.getLabel;
import {setWindowKeys} from '../../../util/Util';

/**
 * 考核结果分析
 * jiansong 2019/6/18
 */
@inject("scoreReportListStore", 'scoreWorkerReportStore')
@observer
export default class ScoreReportIndex extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedKey: "1",
            hasInit: false, //按人员是否初始化数据
            collectParams: {
                favname: getLabel(506169, "考核结果分析"),
                favouritetype: "5",
                link: '/spa/workrelate/static/index.html#/main/workrelate/performance/performanceIndex?menutype=9',
                importantlevel: 1,
            }
        }
    }

    componentWillMount() {
        setWindowKeys(9, getLabel(506169, "考核结果分析"));
        this.props.scoreReportListStore.doInit();
    }

    render() {
        const topTab = [
            {key: "1", title: getLabel('382619', '按组织')},
            {key: "2", title: getLabel('382620', '按人员')}
        ];
        const {selectedKey, hasInit, collectParams} = this.state;
        let {setShowSearchAd, showSearchAd} = this.props.scoreWorkerReportStore;
        return (
            <div style={{height: '100vh'}}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@td4qdu`} datas={this.getMenu()} collectParams={collectParams}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@z6t3fx`}
                        title={getLabel('506169', '考核结果分析')}
                        icon={<i className='icon-coms-implement'/>}
                        iconBgcolor='rgb(150, 53, 138)'
                        buttons={this.getButton(this.props.ecId || '')}
                        dropMenuDatas={this.getMenu()}
                        showDropIcon={true}/>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ljj7j6`}
                        datas={topTab}
                        keyParam="key" //主键
                        selectedKey={selectedKey}
                        searchType={this.getSearchType()}
                        showSearchAd={showSearchAd}
                        hideSearchAd={() => setShowSearchAd(false)}
                        setShowSearchAd={bool => setShowSearchAd(bool)}
                        buttonsAd={this.getTabButtonsAd(this.props.ecId || '')}
                        searchsAd={this.getSearchsAd()}
                        onChange={selectedKey => {
                            if (selectedKey == 2 && !hasInit) {
                                this.props.scoreWorkerReportStore.doInit();
                                this.setState({hasInit: true})
                            }
                            this.setState({selectedKey})
                        }}
                    />
                    {selectedKey === "1" && <ScoreReportList ecId={`${this && this.props && this.props.ecId || ''}_ScoreReportList@9j044t`}/>}
                    {selectedKey === "2" && <ScoreWorkerReport ecId={`${this && this.props && this.props.ecId || ''}_ScoreWorkerReport@f4ciql`}/>}
                </WeaRightMenu>
            </div>
        )
    }

    //获取高级搜索框
    getSearchType() {
        const {selectedKey} = this.state;
        if (selectedKey == '1') {
            return [];
        } else {
            return ["advanced"];
        }
    }

    //搜索方法
    doSearch = () => {
        const {selectedKey} = this.state;
        if (selectedKey == '1') {
            this.props.scoreReportListStore.getScoreReportListData();
        } else {
            this.props.scoreWorkerReportStore.queryParams.current = 1;
            this.props.scoreWorkerReportStore.getScoreWorkerReportData();
        }
    }

    //获取按钮
    getButton(ecId) {
        const {selectedKey} = this.state;
        let {selectedRowValues, showCharts, showChart, changeShowCharts} = this.props.scoreReportListStore
        let buttons = [];
        if (selectedKey === "1" && !showCharts) {
            buttons = [(<Tooltip ecId={`${ecId}_Tooltip@q6mic9@viewchart`} title={getLabel('382617', '查看图表')}><Button ecId={`${ecId}_Button@4hoss6@viewchart`} type='primary'
                                                                            disabled={selectedRowValues.length == 0}
                                                                            onClick={() => showChart()}>{getLabel('382617', '查看图表')}</Button></Tooltip>)]
        } else if (selectedKey === "1" && showCharts) {
            buttons = [(<Tooltip ecId={`${ecId}_Tooltip@v144mh@backlist`} title={getLabel('31088', '返回列表')}><Button ecId={`${ecId}_Button@qmtm51@backlist`} type='primary'
                                                                           onClick={() => changeShowCharts()}>{getLabel('31088', '返回列表')}</Button></Tooltip>)]
        }
        return buttons;
    };

    //获取菜单
    getMenu() {
        let {selectedRowValues, showCharts, showChart, changeShowCharts} = this.props.scoreReportListStore
        const {selectedKey} = this.state;
        let menus = [];
        if (selectedKey === "2" || (selectedKey === "1" && !showCharts)) {
            menus.push({
                key: '0',
                icon: <i className='icon-coms-search'/>,
                content: getLabel('388113', '搜索'),
                onClick: this.doSearch,
            });
        }
        ;
        if (selectedKey === "1" && !showCharts && selectedRowValues.length > 0) {
            menus.push({
                key: '1',
                icon: <i className='icon-coms-Bar'/>,
                content: getLabel('382617', '查看图表'),
                onClick: () => showChart()
            })
        } else if (selectedKey === "1" && showCharts) {
            menus.push({
                key: '2',
                icon: <i className='icon-coms-Return'/>,
                content: getLabel('31088', '返回列表'),
                onClick: () => changeShowCharts()
            })
        }
        return menus;
    };

    //获取高级搜索按钮
    getTabButtonsAd(ecId) {
        let {advanceSearch, setShowSearchAd, resetParams} = this.props.scoreWorkerReportStore;
        return [
            (<Button ecId={`${ecId}_Button@rn4o8b@search`} type="primary" onClick={advanceSearch}>{getLabel('388113', '搜索')}</Button>),
            (<Button ecId={`${ecId}_Button@08e0nm@reset`} type="ghost" onClick={resetParams}>{getLabel('2022', '重置')}</Button>),
            (<Button ecId={`${ecId}_Button@rc2vjs@cancel`} type="ghost" onClick={() => setShowSearchAd(false)}>{getLabel('31129', '取消')}</Button>)
        ]
    }

    //高级搜索条目
    getSearchsAd() {
        const {includesubData, includedeptData, queryParams, onSearchChange, hrmData, subcompanyData, departmentData} = this.props.scoreWorkerReportStore
        let items = [];
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ckpzj8@person`} label={getLabel('30042', '人员')} ratio1to2>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@fxoiut@person`}
                        type={17}
                        isSingle={false}
                        title={getLabel('179', '人力资源')}
                        replaceDatas={hrmData}
                        onChange={(ids, names) => onSearchChange({"hrmids": ids, "hrmnames": names})}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@j990vq@includesub`} label={getLabel('33553', '分部')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nilkzl@includesub`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wdo7up@includesub`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@pp57dm@includesub`}
                                options={includesubData}
                                value={queryParams.includesub}
                                onChange={(val) => onSearchChange({"includesub": val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bzfoy8@subdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@nsrgyq@subdata`}
                                type={194}
                                isSingle={false}
                                icon="icon-coms-hrm"
                                title={getLabel('33553', '分部')}
                                replaceDatas={subcompanyData}
                                onChange={(ids, names) => onSearchChange({
                                    "subcompanyids": ids,
                                    "subcompanynames": names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gp3dk7@includedept`} label={getLabel('27511', '部门')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rweyt7@includedept`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yg3qyw@includedept`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7dxyqg@includedept`}
                                options={includedeptData}
                                value={queryParams.includedept}
                                onChange={(val) => onSearchChange({"includedept": val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gdy4za@deptdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@d4aq07@deptdata`}
                                type={57}
                                isSingle={false}
                                icon="icon-coms-hrm"
                                title={getLabel('27511', '部门')}
                                replaceDatas={departmentData}
                                onChange={(ids, names) => onSearchChange({
                                    "departmentids": ids,
                                    "departmentnames": names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6bjxh1`} title={getLabel('32905', '常用条件')} items={items} showGroup={true} col={2}/>
    }

};